<template>
	<view class="punch">
		<view style="background: #FAFAFA;height: 32rpx;"></view>
		<view>
			<view class="d-flex nav-header-tab">
				<view :class="punchindex===0?'unsignIn':'signIn'" @click="punchevent(0)" class="d-flex a-center j-center" style="width:345rpx;height: 106rpx;border-radius: 30rpx 0rpx 0rpx 30rpx;">
					签到打卡
				</view>
				
				<view :class="punchindex===1?'unstatistics':'nav-statistics'" @click="punchevent(1)" class="nav-statistics d-flex a-center j-center" style="width:345rpx;height: 106rpx;border-radius: 0rpx 30rpx 30rpx 0rpx;border: 4px solid #DAF4F2;">
					数据统计
				</view>
			</view>
			
			<view v-show="punchindex===0">
				<view class="d-flex" style=" margin:32rpx 67rpx 0 67rpx">
					<block v-for="(item,index) in punch" :key="index">
						<image @click="navBuild(index)" :style="index===1?'margin-left: 32rpx;':''" class="nav-punch" :src="buildingindex===index?item.showimg:item.hiddimg"></image>
					</block>
				</view>
				
				<view v-show="buildingindex===1">
					<view style="padding:32rpx 53rpx 0 51rpx;" class="position-relative ly">
						<image class="position-relative" style="width: 646rpx;height: 105rpx;" src="../../static/my/xx02.png"></image>
						<view class="position-absolute d-flex a-center" style="width: 646rpx;height: 105rpx;line-height: 105rpx;left: 50%;top: 50%;transform: translate(-50%,-50%);">
							<image style="width: 58rpx;height: 58rpx;margin-left:33rpx" src="../../static/punch/3423.jpg"></image>
							<text style="margin-left:20rpx;color: #AAAAAA;">楼宇名字</text>
							<view style="margin-left:60rpx;" @click="open">
								<text style="color: #333333;">{{buildingName}}</text>
								<image style="width: 22rpx;height: 12rpx;margin-left:9rpx" src="../../static/index/zk01@2x.png"></image>
							</view>
						</view>
					</view> 
					<uni-popup ref="popup" type="bottom">
						<view class="bg-white" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;padding-top:20rpx;height: 620rpx;">
							<scroll-view scroll-y="true" style="height: 500rpx;">
								<block v-for="(item,index) in Allbuilding" :key="index">
									<view class="d-flex a-center j-center border-bottom main-border-color pt-2 pb-2" @click="navbuid(index)">
										{{item.buildingName+'-'+item.distance+'米'}}
									</view>	
								</block>
							</scroll-view>
							
						</view>	
					</uni-popup>
					
					
					<view style="padding:32rpx 53rpx 0 51rpx;" class="position-relative ly">
						<image class="position-relative" style="width: 646rpx;height: 105rpx;" src="../../static/my/xx02.png"></image>
						<view class="position-absolute d-flex a-center" style="width: 646rpx;height: 105rpx;line-height: 105rpx;left: 50%;top: 50%;transform: translate(-50%,-50%);">
							<image style="width: 58rpx;height: 58rpx;margin-left:33rpx" src="../../static/punch/fsdfs.png"></image>
							<text style="margin-left:20rpx;color: #AAAAAA;">拜访次数</text>
							<view style="margin-left:60rpx;">
								<text style="color: #333333;">{{numbervisits}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="d-flex j-center" style="margin-top:67rpx" @click="Photograph">
					<image style="width:258rpx;height: 258rpx;" src="../../static/punch/qdpz01@2x.png"></image>
				</view>
				
				<view @click="punchSubmit" class="punch-buttom d-flex a-center j-center position-fixed" style="bottom:100rpx;margin:0 55rpx">
					提交
				</view>
			</view>
			<!-- 打卡成功或者失败组件 -->
			<Succpopups ref="sccpopups" />
			<errorpopups ref="errorpopups" />
			
			
			
			<!-- 数据统计 -->
			<view v-show="punchindex===1">
				<view style=" margin:32rpx 67rpx 0 67rpx">
					<view class="content">
					    <ren-calendar ref='ren' :collapsible="false" :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'></ren-calendar>
					</view>
				</view>
				<!-- 在途打卡 -->
				<view v-for="(item,index) in wayCardrecord" :key="index" style="width: 629rpx;height: 246rpx;background: #FFFFFF;border: 2rpx solid #E3F4F3;border-radius: 20rpx;margin:0 61rpx 32rpx 60rpx">
					<view class="d-flex a-center j-center" style="
					width: 150rpx;
					height: 58rpx;
					background: #4BC1B8;
					border: 2rpx solid #E3F4F3;
					border-radius: 20rpx 0rpx 20rpx 0rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					">
						在途打卡
					</view>
					
					<view class="d-flex" style="margin:25rpx 0 0 29rpx">
						<image style="width: 52rpx;height: 52rpx;" src="../../static/Statistics/dz03.png"></image>
						<view class="d-flex" style="margin-left:14rpx;font-size: 24rpx;">
							<text style="color:#AFD6D3;font-size: 24rpx;flex: none;">地址:</text>
							<text style="font-size: 24rpx;width: 465rpx;" class="ml-2 text-hidden-two">{{item.punchAddress}}</text>
						</view>
					</view>
					<view class="d-flex j-end" style="font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #D0D0D0;
					margin-right: 32rpx;
					">
						{{item.punchDate}}
					</view>
				</view>
				
				<!-- 楼宇打卡 -->
				<view v-for="(item,index) in buildingCardrecord" :key="index" style="width: 629rpx;padding-bottom:20rpx;background: #FFFFFF;border: 2rpx solid #E3F4F3;border-radius: 20rpx;margin:0 61rpx 0 60rpx">
					<view class="d-flex a-center j-center" style="
					width: 150rpx;
					height: 58rpx;
					background: #4BC1B8;
					border: 2rpx solid #E3F4F3;
					border-radius: 20rpx 0rpx 20rpx 0rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					">
						楼宇打卡
					</view>
					
					<view class="ludk">
						<view class="d-flex" style="margin:25rpx 0 0 29rpx">
							<image style="width: 52rpx;height: 52rpx;" src="../../static/Statistics/ly03.png"></image>
							<view class="d-flex" style="margin-left:14rpx;font-size: 24rpx;">
								<text style="color:#AFD6D3;font-size: 24rpx;flex: none;">楼宇名称:</text>
								<text style="font-size: 24rpx;width: 465rpx;" class="ml-2 text-hidden-one">{{item.buildingName}}</text>
							</view>
						</view>
						
						<view class="d-flex" style="margin:25rpx 0 0 29rpx">
							<image style="width: 52rpx;height: 52rpx;" src="../../static/Statistics/dk03.png"></image>
							<view class="d-flex" style="margin-left:14rpx;font-size: 24rpx;">
								<text style="color:#AFD6D3;font-size: 24rpx;flex: none;">打卡次数:</text>
								<text style="font-size: 24rpx;" class="ml-2">{{item.punchCount}}次</text>
							</view>
						</view>
						
						<view class="d-flex" style="margin:25rpx 0 0 29rpx">
							<image style="width: 52rpx;height: 52rpx;" src="../../static/Statistics/dz03.png"></image>
							<view class="d-flex" style="margin-left:14rpx;font-size: 24rpx;">
								<text style="color:#AFD6D3;font-size: 24rpx;flex: none;">地址:</text>
								<text style="font-size: 24rpx;width: 465rpx;" class="ml-2 text-hidden-two">{{item.punchAddress}}</text>
							</view>
						</view>
						
						<view class="d-flex j-end" style="font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #D0D0D0;
						margin-right: 32rpx;
						">
							{{item.punchDate}}
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import Succpopups from '@/components/succ-pop-ups.vue'
	import errorpopups from '@/components/error-pop-ups.vue'
	import newdate from '@/utils/utils.js'
	import map from "@/utils/qqmap-wx-jssdk.js"
	export default {
		data() {
			return {
				curDate:'',//选中日期
				markDays:[],
				punchindex:0,
				buildingindex:0,
				waybatchNumber:"",
				picture:"",
				distance:"",//距离
				Allbuilding:[],
				buildingName:"选择楼宇",
				latitude:0,
				longitude:0,
				builmz:"",//楼宇名称
				numbervisits:0,
				buildID:0,
				contactAddress:'',
				punchLongitude:0,
				punchLatitude:0,
				currentAddress:"",
				KeyboardHeight:300,
				buildingCardrecord:[],//楼宇打卡
				wayCardrecord:[],//在途打卡
				noClick:true,//防止多次点击按钮
				punch:[
					{
						showimg:'/static/punch/ztdk-xz01@2x.png',
						hiddimg:'/static/punch/ztdkwxz02@2x.png'
					},
					{
						showimg:'/static/punch/lydkxz02@2x.png',
						hiddimg:'/static/punch/lydk-wxz01@2x.png'
					}
				]
			}
		},
		components:{RenCalendar,Succpopups,errorpopups},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				latitudes:state=>state.user.latitude,
				longitudes:state=>state.user.longitude,
				isdw:state=>state.user.isdw
			})
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		onLoad(){
			// this.getbuilding();
			if(this.latitudes!=this.latitude){
				this.getdy()
			}
			
			const value = uni.getStorageSync('waybatchNumber');
			if(value){
				this.waybatchNumber = value;
			}
			
			if(!this.currentAddress){
				this.getdy()
			}
		},
		methods: {
			...mapMutations(['dw']),
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
				// this.getbuilding()
			},
			navbuid(i){
				let da = this.Allbuilding[i];
				this.punchLongitude = da.latitude;
				this.punchLatitude = da.longitude;
				this.buildID = da.id;
				this.contactAddress = da.contactAddress;
				this.buildingName=da.buildingName;
				this.numbervisits= da.visitCount;
				this.$refs.popup.close()
				
				
				if(da.distance>200){
					this.buildingName="选择楼宇";
					this.numbervisits= 0;
					this.$refs.errorpopups.open()
					return
				}
				
				if(da.buildingStatus==3){
					uni.showToast({
						title:"禁止打卡楼宇",
						icon:'error'
					})
					this.buildingName="选择楼宇";
					this.numbervisits= 0;
					return
				}
			},
			punchevent(e){
				this.punchindex = e;
				this.getStatistics()
			},
			navBuild(e){
				this.buildingindex = e;
				this.picture = "";
				if(this.latitudes!=this.latitude){
					this.getdy()
				}
			},
			sous(){
				let res =null;
				if(this.builmz!=""){
					this.Allbuilding.forEach((item,index)=>{
						if(item.buildingName==this.builmz){
							res = this.Allbuilding[index];
						}
					})
					if(res){
						this.Allbuilding=[]
						this.Allbuilding.push(res)
						this.builmz = ""
					}else{
						uni.showToast({
							title:'没有找到',
							icon:'error'
						})
					}
				}else{
					this.getbuilding()
				}
			},
			onDayClick(data){
					this.curDate = data.date;
					this.getStatistics()
			},
			//获取所有楼宇名称及拜访次数
			getbuilding(longitude,latitude){
				this.$api.getALLbuilding({
					longitude,
					latitude
				},false).then(res=>{
					console.log(res)
					this.Allbuilding = res.data;
				})
			},
			//获取定位
			getdy(){
				let _this = this
				uni.getSystemInfo({
					success: function (res) {
						let isdw = res.locationEnabled;
						if(!isdw){
							 _this.dw(false)
							 uni.showModal({
								 title:"定位服务未开启",
								 content:"请打开设置->微信->位置权限才可以使用"
							 })
							 return
						}else{
							_this.dw(true)
						}
					}
				});
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					success: function (res) {
						_this.latitude=res.latitude
						_this.longitude=res.longitude
						
						_this.getbuilding(res.latitude,res.longitude);
						// 实例化API核心类
						var mapsdk = new map({
							key: 'L7SBZ-YJZCD-CDL4L-PL6KE-F35UZ-MHFZA' // 必填
						});
						mapsdk.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							coord_type:4,
							success: (res) => {
								_this.currentAddress=res.result.address
							},
							fail: (error) => {
									console.error(error);
							}
						});
					}
				})
			},
			Photograph(){
				if(!this.isdw){
					 uni.showModal({
						 title:"定位服务未开启",
						 content:"请打开设置->微信->位置权限才可以使用"
					 })
					 return
				}
				let _this = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //只可以拍照
					success: function (res) {
						uni.uploadFile({
							url: "http://dev.bangbangtongcheng.com/pigfull/ht/attach/upload",
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: "file",
							success(res1) {
								let data = JSON.parse(res1.data);
								if(data.code===200){
									_this.picture = data.data[0].url
									_this.punchSubmit()
								}else{
									uni.showToast({
										title:"图片上传失败",
										icon:'error'
									})
								}
							}
						})
					}
				});
			},
			//提交
			async punchSubmit(i){
				if(!this.currentAddress){
					this.getdy()
				}
				if(this.buildingindex===0){
					let waybatchNumber = this.waybatchNumber;
					let userId = this.userInfo.id;
					let punchDate = newdate.getNewdate();
					let punchPicture = this.picture;
					let punchAddress = this.currentAddress;
					let punchLongitude = this.latitude;
					let punchLatitude = this.longitude;
					if(!this.picture){
						uni.showToast({
							title:'请选择图片',
							icon:'error'
						})
						return
					}
					if(!this.noClick) return
					this.noClick = false
					uni.showLoading({
						title: '打卡中'
					});
					await this.$api.roadPunch({
						waybatchNumber,
						userId,
						punchDate,
						punchPicture,
						punchAddress,
						punchLongitude,
						punchLatitude
					},false).then(res=>{
						if(res.code === 200){
							uni.hideLoading();
							uni.setStorageSync('waybatchNumber', res.data);
							this.waybatchNumber = res.data
							this.$refs.sccpopups.open()
							this.picture = "";
							this.noClick = true
						}else{
							this.noClick = true
						}
					})
				}else{
					let punchNumber = this.waybatchNumber;
					let buildingId = this.buildID;
					let userId = this.userInfo.id;
					let punchDate = newdate.getNewdate();
					let punchPicture = this.picture;
					let punchLongitude = this.latitude;
					let punchLatitude = this.longitude;
					let punchAddress = this.currentAddress;
					if(this.waybatchNumber==""){
						uni.showToast({
							title:'请先在途打卡',
							icon:'error'
						})
						return
					}else if(this.buildingName=="选择楼宇"){
						uni.showToast({
							title:'请先选择楼宇',
							icon:'error'
						})
						return
					}else if(!this.picture){
						uni.showToast({
							title:'请选择图片',
							icon:'error'
						})
						return
					}
					
					if(!this.noClick) return
					this.noClick = false
					
					uni.showLoading({
						title: '打卡中'
					});
					this.$api.buildingPunch({
						punchNumber,
						buildingId,
						userId,
						punchDate,
						punchPicture,
						punchLongitude,
						punchLatitude,
						punchAddress
					},false).then(res=>{
						if(res.code === 200){
							uni.hideLoading();
							this.$refs.sccpopups.open()
							this.picture = "";
							this.waybatchNumber="";
							uni.removeStorageSync('waybatchNumber');
							this.noClick = true
						}else{
							this.noClick = true
						}
					})
				}
			},
			//获取打卡数据统计
			getStatistics(){
				this.$api.getStatistics({
					userId:this.userInfo.id,
					punchDate:this.curDate
				},false).then(res=>{
					if(res.wayCardrecord.length==0&&res.buildingCardrecord.length==0){
						uni.showToast({
							title:'暂无打卡数据',
							icon:'error'
						})
					}
					this.wayCardrecord = res.wayCardrecord;//在途打卡
					this.buildingCardrecord = res.buildingCardrecord;//楼宇打卡
				})
			}
		}
	}
</script>

<style lang="scss">
	.signIn{
		background: #FFFFFF;
		color:#FFE8CA;
		border: 4px solid #FFE8CA;
	}
	.unsignIn{
		background: #FFE8CA;
		color: #EC9820;
		font-size: 34rpx;
		font-weight: 500;
		border: 4px solid #FFE8CA;
	}
	.nav-statistics{
		background: #FFFFFF;
		border: 4px solid #DAF4F2;
		color: #DAF4F2;
	}
	.unstatistics{
		background: #DAF4F2;
		font-weight: 500;
		color: #4BC1B8;
		font-size: 34rpx;
	}
	.punch{
		margin-bottom: 20rpx;
		.nav-header-tab{
			margin:42rpx 30rpx 0 30rpx;
			view{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
		.nav-fonts{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 300;
		}
		.nav-punch{
			width: 300rpx;
			height: 92rpx;
		}
		.ly{
			text{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 300;
			}
		}
		.punch-buttom{
			width: 640rpx;
			height: 98rpx;
			background: #F2973C;
			border-radius: 49rpx;
			color:#FFFFFF;
		}
	}

	.tsc{
		width: 100%;
		box-shadow: 0rpx 14rpx 27rpx 2rpx rgba(0,0,0,0.11);
	} 
</style>
